<template>
	<view :style="bgstyle">
		
          <view class="qrcode_box">
			 
			  <image mode="scaleToFill" class="bk_qr" :src="bg_img_url"></image>
			  
			  <view class="QR">
				<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
			  </view>
			  <!-- 隐藏由图片自行显示标题 -->
			  <view class="title" v-if="false">
			  	{{title}}
			  </view>
			  <view class="title_order">
			  	票券订单号: {{order_code}}
			  </view>
		</view>
		
		
		<view class="btn" v-show="showBtn" @tap="printscreen">
			{{tis}}
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	export default {
		data() {
			return {
				title: '',
				order_code: '',
				order_qr: '',
				tis: "保存到相册",
				showBtn: false,
				backpage: '../../login/login?backpage=' + '../pages/index/index',
				token: '',
				bg_img_url:'',
				bgstyle:"{background-color:c8588c；}",
				zq_index:0
			};
		},
		onLoad(option) {
			// #ifdef APP-PLUS
			this.showBtn = true;
			// #endif
			if(option.type=='zq'){
				this.getzqdata(option.id);
			}
			else{
				this.getdata(option.id);
			}
			this.zq_index=option.index;
		
		},
		methods: {
			// 截图，调用webview、Bitmap方法
			printscreen() {
				this.tis = "正在保存"
				let ws = this.$mp.page.$getAppWebview();
				let bitmap = new plus.nativeObj.Bitmap();
				this.showBtn = false;
				this.$nextTick(function() {
					setTimeout(() => {
						ws.draw(bitmap, (e) => {
							this.showBtn = true;
							console.log('bitmap绘制图片成功');
							console.log("e: " + JSON.stringify(e));
							bitmap.save("_doc/Qr.jpg", {
								overwrite: true,
								quality: 100
							}, (i) => {
								plus.gallery.save(i.target, (e) => {
									uni.showToast({
										title: '保存成功'
									})
									this.tis = "保存到相册"
									bitmap.clear(); //销毁
								}, (e) => {
									bitmap.clear(); //销毁
								});
							}, (e) => {
								console.log('保存图片失败：' + JSON.stringify(e));
							});
						}, (e) => {
							console.log('bitmap绘制图片失败：' + JSON.stringify(e));
						});
					}, 200)
				})
			},
			getdata(oid) {
				let token = uni.getStorageSync("token_h5")
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: "https://bg.jswbgz.com/post/copoun_order:get_copoun_code", //仅为示例，并非真实接口地址。
					data: {
						order_id: oid,
						token: token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					method: 'post',
					success: (res) => {
						uni.hideLoading()
						console.log(res.data)
						//console.log(res.data.data.code)
						if (res.data.success) {
							if (res.data.data.code != "") {
								console.log(res)
								//alert(res.data.data.code)
								this.order_qr = res.data.data.code;
								this.title = res.data.data.title;
								this.order_code = res.data.data.order_no
								this.bg_img_url=res.data.data.bg_img_url=="null"||res.data.data.bg_img_url==null?"../../../static/img/category/qrcode_bak.jpg":res.data.data.bg_img_url
							this.createQrcode(res.data.data.code_key)
							} else {
								uni.showToast({
									title: res.data.data.msg,
									icon: "none"
								});
							}
						} else if (res.data.msg == "登录已失效，请重新登录") {
							this.$logout();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}

					},
					fail: (res) => {

						uni.showToast({
							title: "数据加载失败",
							icon: "none"
						});
						//console.log(res)
					}
				});
			}
            ,
            getzqdata(oid) {
            	let token = uni.getStorageSync("token_h5")
            	uni.showLoading({
            		title: '加载中...'
            	})
            	uni.request({
            		url: "https://bg.jswbgz.com/post/copoun_order:get_zq_copoun_code", //仅为示例，并非真实接口地址。
            		data: {
            			order_id: oid,
            			token: token
            		},
            		header: {
            			'Content-Type': 'application/x-www-form-urlencoded'
            		},
            		dataType: 'json',
            		method: 'post',
            		success: (res) => {
            			uni.hideLoading()
            			console.log(res.data)
            			//console.log(res.data.data.code)
            			if (res.data.success) {
            				if (res.data.data.code != "") {
            					console.log(res)
            					//alert(res.data.data.code)
            					this.order_qr = res.data.data[this.zq_index].code;
            					this.title = res.data.data[this.zq_index].title;
            					this.order_code = res.data.data[this.zq_index].order_no
            					this.bg_img_url=res.data.data[this.zq_index].bg_img_url=="null"||res.data.data[this.zq_index].bg_img_url==null?"../../../static/img/category/qrcode_bak.jpg":res.data.data[this.zq_index].bg_img_url
            				    this.createQrcode(res.data.data[this.zq_index].code_key)
							} else {
            					uni.showToast({
            						title: res.data.data[this.zq_index].msg,
            						icon: "none"
            					});
            				}
            			} else if (res.data.msg == "登录已失效，请重新登录") {
            				this.$logout();
            			} else {
            				uni.showToast({
            					title: res.data.msg,
            					icon: "none"
            				});
            			}
            
            		},
            		fail: (res) => {
            
            			uni.showToast({
            				title: "数据加载失败",
            				icon: "none"
            			});
            			//console.log(res)
            		}
            	});
            },
			createQrcode(val)
			{
				// 获取uQRCode实例
				var qr = new UQRCode();
				//console.log("1"+qr)
				// 设置二维码内容
				qr.data = val;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			}
            

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.block {
		width: 100%;
		height: 30vh;
		//background-color: #fff;
		display: flex;
		justify-content: center;
		position: absolute;
		top:0px;
		position: relative;

	}
	.qrcode_box{
		text-align: center;
		width:100%;
		overflow: hidden;
	}
    .bk_qr{
    	width: 100%;
		height: 810px;
		margin: 0 auto;
    }
    .QR {
		width: 100%;
		height: 185px;
		//margin: -40vw auto 0 auto;
		background-color: #fff0;
		display: flex;
		justify-content: center;
		align-items: center;
        position: absolute;
		top: 178px;
		left: 4px;
		image {
			width: 185px;
			height: 185px;
		}
	}

	.title {
		width: 100%;
		margin-top: 25px;
		display: flex;
		justify-content: center;
		font-size: 24px;
		font-weight: bold;
		font-family: 微软雅黑;
		color: #aa1214;
		position: absolute;
		top: 60px;
	}
    .title_order{
		width: 100%;
		margin-top: 25px;
		display: flex;
		justify-content: center;
		font-size: 16px;
		color: #000;
		position: absolute;
		top: 346px;
		left: 5px;
	}
	.btn {

		width: 50%;
		height: 80upx;
		border-radius: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20upx;
		margin: 0 auto;
		margin-top: 50upx;
		background-color: rgba(255, 255, 255, .8);
	}

	.logo {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 25upx;
	
	image {
			width: 39.6%;
		}

	}
</style>
